<template>
    <div class="page-container">
        <h1 class="page-title">心理咨询</h1>

        <div class="content-wrapper">
            <el-card class="intro-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h2>心理咨询服务介绍</h2>
                    </div>
                </template>
                <div class="card-content">
                    <p>
                        我们提供专业的心理咨询服务，帮助您解决心理困扰，提升心理健康水平。
                    </p>
                    <p>
                        您可以选择线上或线下咨询方式，预约心理医生为您提供一对一的专业指导。
                    </p>
                </div>
            </el-card>

            <div class="consultation-steps">
                <div class="step-item">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>选择咨询师</h3>
                        <p>
                            浏览心理咨询师资料，根据专业领域和个人需求选择适合您的咨询师
                        </p>
                    </div>
                </div>

                <div class="step-item">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>预约时间</h3>
                        <p>选择合适的咨询时间段，提交预约申请</p>
                    </div>
                </div>

                <div class="step-item">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>支付费用</h3>
                        <p>确认预约后，支付咨询费用</p>
                    </div>
                </div>

                <div class="step-item">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>开始咨询</h3>
                        <p>
                            在预约时间，按照选择的方式（线上/线下）开始心理咨询
                        </p>
                    </div>
                </div>
            </div>

            <h2 class="section-title">推荐心理咨询师</h2>

            <div class="psychologist-list">
                <el-card
                    v-for="(psychologist, index) in psychologists"
                    :key="index"
                    class="psychologist-card"
                    shadow="hover"
                >
                    <div class="psychologist-header">
                        <el-avatar
                            :size="60"
                            :src="psychologist.avatar"
                            class="psychologist-avatar"
                        >
                            <el-icon><User /></el-icon>
                        </el-avatar>
                        <div class="psychologist-title">
                            <h3>{{ psychologist.name }}</h3>
                            <div class="tags">
                                <el-tag
                                    v-for="(tag, i) in psychologist.tags"
                                    :key="i"
                                    size="small"
                                    effect="plain"
                                    >{{ tag }}</el-tag
                                >
                            </div>
                        </div>
                    </div>

                    <div class="psychologist-info">
                        <p>{{ psychologist.introduction }}</p>
                        <div class="rating">
                            <span>评分: </span>
                            <el-rate
                                v-model="psychologist.rating"
                                disabled
                                text-color="#ff9900"
                            />
                            <span>({{ psychologist.reviewCount }})</span>
                        </div>
                        <div class="price">
                            咨询费用: ¥{{ psychologist.price }}/次
                        </div>
                    </div>

                    <div class="card-actions">
                        <el-button
                            type="primary"
                            @click="makeAppointment(psychologist)"
                            >预约咨询</el-button
                        >
                        <el-button
                            type="info"
                            plain
                            @click="viewDetail(psychologist)"
                            >查看详情</el-button
                        >
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 心理咨询师列表
const psychologists = ref([
    {
        id: 1,
        name: '王医生',
        avatar: '',
        tags: ['抑郁症', '焦虑障碍', '婚姻家庭'],
        introduction:
            '临床心理学博士，有10年心理咨询经验，擅长治疗抑郁症、焦虑障碍和婚姻家庭问题。',
        rating: 4.8,
        reviewCount: 126,
        price: 300
    },
    {
        id: 2,
        name: '李医生',
        avatar: '',
        tags: ['青少年心理', '学习障碍', '情绪管理'],
        introduction:
            '儿童青少年心理专家，关注青少年心理健康，帮助解决学习障碍、情绪管理等问题。',
        rating: 4.6,
        reviewCount: 98,
        price: 280
    },
    {
        id: 3,
        name: '张医生',
        avatar: '',
        tags: ['压力管理', '职场心理', '人际关系'],
        introduction:
            '职场心理专家，专注于压力管理、职场适应和人际关系问题，助您找回工作生活平衡。',
        rating: 4.9,
        reviewCount: 156,
        price: 320
    },
    {
        id: 4,
        name: '刘医生',
        avatar: '',
        tags: ['创伤治疗', '失眠', '心理康复'],
        introduction:
            '创伤治疗专家，擅长处理各类心理创伤、失眠问题，帮助患者心理康复。',
        rating: 4.7,
        reviewCount: 113,
        price: 350
    }
])

// 预约咨询
const makeAppointment = (psychologist) => {
    console.log('预约咨询', psychologist)
    ElMessage.success(`您已成功预约${psychologist.name}的咨询，请等待确认`)
}

// 查看详情
const viewDetail = (psychologist) => {
    console.log('查看详情', psychologist)
    // 这里可以跳转到心理医生详情页
}
</script>

<style scoped>
.page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-header h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: normal;
}

.card-content p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #666;
}

.section-title {
    font-size: 20px;
    color: #333;
    margin: 20px 0;
    font-weight: normal;
}

/* 咨询步骤 */
.consultation-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.step-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    align-items: flex-start;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4086f4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
    font-weight: normal;
}

.step-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* 心理医生列表 */
.psychologist-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.psychologist-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.psychologist-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.psychologist-avatar {
    margin-right: 15px;
    background: #4086f4;
    color: #fff;
}

.psychologist-title {
    flex: 1;
}

.psychologist-title h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
    font-weight: normal;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.psychologist-info {
    flex-grow: 1;
    margin-bottom: 15px;
}

.psychologist-info p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.rating {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
}

.rating .el-rate {
    margin: 0 5px;
}

.price {
    font-size: 14px;
    color: #ff6b6b;
    margin-bottom: 10px;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

@media (max-width: 768px) {
    .consultation-steps {
        flex-direction: column;
    }

    .psychologist-list {
        grid-template-columns: 1fr;
    }
}
</style>
